<template>
  <div class="seven_content myStyle">
    <div class="content_top">
      <div class="title_box">
        <div class="top">
          <div class="border"></div>
          <span>当月实时数据 </span>
          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
            style="background:none!important;margin-left:0px;margin-top:2px">
            <el-form-item label="物资类型">
              <treeselect v-model="queryParams.typeId" :options="configOptions" placeholder="请选择类型"
                :normalizer="normalizer" :searchable="false" :appendToBody="true" />
            </el-form-item>
          </el-form>
          <StrokeItem3 title="种类" :number="infoData.typeNum||0" unit="种"
            style="margin-bottom:0;width:168px; margin-left: -10px;" />
          <StrokeItem3 title="库存数量" :number="infoData.stockNum||0"
            style="margin-bottom:0;width:168px; margin-left: 10px;" />
          <StrokeItem3 title="总额" :number="infoData.stockMoney||0" unit="元"
            style="margin-bottom:0;width:200px; margin-left: 10px;" />
        </div>
      </div>
      <div class="bzjk_box flex_center" slot="content" :data="top1">
        <div class="sjtj_item backgroung flex_between_direction">
          <div class="title flex_center" :class="'text_' + color[0]">
            待确认
          </div>
          <div class="number flex_center" :class="['text_shadow_' + color[0], 'border_' + color[0]]">
            {{ top1[0] }}
          </div>
        </div>
        <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
        <div class="sjtj_item backgroung flex_between_direction">
          <div class="title flex_center" :class="'text_' + color[1]">
            维修中
          </div>
          <div class="number flex_center" :class="['text_shadow_' + color[1], 'border_' + color[1]]">
            {{ top1[1] }}
          </div>
        </div>
        <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
        <div class="sjtj_item backgroung flex_between_direction">
          <div class="title flex_center" :class="'text_' + color[2]">
            维修完成
          </div>
          <div class="number flex_center" :class="['text_shadow_' + color[2], 'border_' + color[2]]">
            {{ top1[2] }}
          </div>
        </div>
        <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
        <div class="sjtj_item backgroung flex_between_direction">
          <div class="title flex_center" :class="'text_' + color[3]">
            复核完成
          </div>
          <div class="number flex_center" :class="['text_shadow_' + color[3], 'border_' + color[3]]">
            {{ top1[3] }}
          </div>
        </div>
        <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
        <div class="sjtj_item backgroung flex_between_direction">
          <div class="title flex_center" :class="'text_' + color[4]">
            验收完成
          </div>
          <div class="number flex_center" :class="['text_shadow_' + color[4], 'border_' + color[4]]">
            {{ top1[4] }}
          </div>
        </div>
        <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
        <div class="sjtj_item backgroung flex_between_direction">
          <div class="title flex_center" :class="'text_' + color[5]">误报</div>
          <div class="number flex_center" :class="['text_shadow_' + color[5], 'border_' + color[5]]">
            {{ top1[5] }}
          </div>
        </div>
      </div>
    </div>
    <div class="content_center">
      <div class="title_box">
        <div class="top">
          <div class="border"></div>
          <span>统计分析 </span>
        </div>
      </div>
      <div class="echartsBox">
        <!-- <StrokeTitle2 title="故障类型分析" class="" style="width: 49.5%; height: 48%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange1" />
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg3 :data="center1" legendLabel="次" legendLeft="58%" length="5" itemWidth="1" cirLeft="1.03" legendHeight="85%" :img="require('@/assets/images/echarts/31.png')" class="center1" />
          </div>
        </StrokeTitle2> -->
        <StrokeTitle2 title="维修时长与维修次数分析" class="" style="width: 49.5%; height: 48%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange1" />
          </div>
          <div class="flex_center Echarts tjfx" slot="content">
            <XRow class="cntjEcharts" :data="center1.list" :xUnit="'分钟（总时长：' + center1.all + ')'"
              itemStyleLabel="value2" barRight="32%" barLeft="11%" barWidth="6" :isTooltip="false"></XRow>
          </div>
          <!-- <div class="flex_center Echarts" slot="content">
            <div class="flex_center Echarts" slot="content">
              <div class="lt">
                <PieImg4 :data="center1.resultData" :allNum="center1.allNum" :tooltipShow="false" :isLenged="false"
                  titleLabel="总时长(时)" unit="" legendLeft="0%" length="3" itemWidth="0.74"
                  :img="require('@/assets/images/echarts/jishiqi.png')" :color="['#23c3ff', '#ffff00', '#ff3aea']" />
              </div>
              <div class="rt" v-if="center1.resultData.length>0">

                <div class="rt_center"></div>
                <div class="clzdjd_box clzdjd_box2">
                  <div class="clzdjd_item flex_center" v-for="(item, index) in center1.resultData" :key="index">
                    <div class="clzdjd_item_left flex_between">

                      <div class="bigCir flex_center">{{ index + 1 }}</div>

                      <div class="border"></div>

                      <div class="smallCir flex_center">
                        <div></div>
                      </div>
                    </div>
                    <el-tooltip class="item" effect="light" :content="item.resultTime||'- -'" placement="top-start">
                      <div class="clzdjd_item_right flex_center">
                        <div class="day">{{ item.name+' '+item.times+'次' || "- -" }}</div>
                        <div class="day_num">{{ item.value || "- -" }}小时</div>
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
        </StrokeTitle2>
        <StrokeTitle2 title="故障次数分析" class="" style="width: 49.6%; height: 47%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange2" />
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg6 :data="center2" titleLabel="总次数" legendLeft="58%" length="3" itemWidth="0.74" cirLeft="0.8"
              legendHeight="85%" titleLeft="21.5" :img="require('@/assets/images/echarts/jishiqi.png')"
              :color="['#23c3ff', '#ffff00', '#ff3aea']" class="center1" />
          </div>
        </StrokeTitle2>
        <StrokeTitle2 title="养护次数统计分析" class="" style="width: 49.6%; height: 47%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange3" />
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg3 :data="bottom1" :isLenged="false" :showLabel="false" length="2" itemWidth="1" cirLeft="1.75"
              :img="require('@/assets/images/echarts/29@2x.png')" :color="['#00ebcd','rgba(35, 195, 255, 1)']" />
            <div class="jxb_right flex_center" v-if="bottom1.length>0">
              <div class="left">
                <div class="big_cir flex_center">
                  <div class="small_cir"></div>
                </div>
                <div class="and"></div>
                <div class="big_cir flex_center big_cir_blue">
                  <div class="small_cir small_cir_blue"></div>
                </div>
              </div>
              <div class="right">
                <div class="item flex_between" v-for="(item, index) in bottom1" :key="index" v-show="index < 2"
                  :class="index == 1 ? 'item_blue' : ''">
                  <div class="title">
                    {{ item.name }}
                  </div>
                  <div class="number">{{ item.value }}次</div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle2>

        <StrokeTitle2 title="设备维修档案" class="" style="width: 49.6%; height: 47%" url="/equipment/repairInfo/repairFiles">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange4" />
          </div>
          <div class="flex_center Echarts" slot="content">
            <XRow @xRowEcharts="xRowEcharts" class="cntjEcharts" :data="bottom2" barRight="15%" barLeft="13%"
              barWidth="6" xUnit="件"></XRow>
          </div>
        </StrokeTitle2>
      </div>
    </div>
  </div>
</template>

<script>
  import PieImg4 from "@/components/echarts/pie/img4.vue";
  import {
    FaultSourceNum,
    SelectFalseAlarmRatio,
    FaultTime,
  } from "@/api/report/echarts.js";
  import {
    ProductDayCount4_1,
  } from "@/api/produce/index.js";
  import {
    SelectRepairStatusNum,
    SelectFaultTypeNum,
    SelectFaultNum,
    SelectMaintainNum,
    SelectEqpFaultNum,
  } from "@/api/equipment/index.js";
  import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue"; //容器
  import PieImg2 from "@/components/echarts/pie/img2.vue";
  import PieImg6 from "@/components/echarts/pie/img6.vue";
  import PieImg3 from "@/components/echarts/pie/img3.vue";
  import { treeselect } from "@/api/equipment/materials/productConfig";
  import { listDepot, getDepot } from "@/api/equipment/materials/depot";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { productStock } from "@/api/produce/index.js";
  import StrokeItem3 from "@/components/myComponents/stroke/item3.vue";
  export default {
    components: {
      StrokeTitle2,
      PieImg2,
      PieImg3,
      Treeselect,
      StrokeItem3,
      PieImg4,
      PieImg6
    },
    name: "EquipmentEcharts",
    data() {
      return {
        model: "month",
        selectList: [
          { value: "", label: "全部" },
          { value: "1", label: "选项一" },
        ],
        bzjkImgList: [
          require("@/assets/images/echarts/bar.png"),
          require("@/assets/images/echarts/line.png"),
          require("@/assets/images/echarts/bar.png"),
        ],
        color: ["blue", "orange", "green", "pink"],
        //当月实时数据
        top1: [0, 0, 0, 0, 0],
        top1Form: {
          beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
          endTime: this.$getMonth("e", 0) + " 23:59:59 ",
          deptId: 101,
        },
        // 停机原因字典
        stopReasonOptions: [],
        //故障类型分析
        center1: {
          // resultData: [],
          all: 0, list: []
        },
        center1Form: {
          // beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
          // endTime: this.$getMonth("e", 0) + " 23:59:59 ",
          // deptId: 101,
          stopDateEnd: this.$getMonth("e", 0),
          stopDateStart: this.$getMonth("s", 0),
          all: "",
          stopReason: ''
        },
        //故障次数分析
        center2: [],
        center2Form: {
          beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
          endTime: this.$getMonth("e", 0) + " 23:59:59 ",
          deptId: 101,
        },
        //养护次数统计分析
        bottom1: [],
        bottom1Form: {
          beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
          endTime: this.$getMonth("e", 0) + " 23:59:59 ",
          deptId: 101,
        },
        //设备维修档案
        bottom2: [],
        bottom2Form: {
          beginTime: this.$getMonth("s", 0) + " 00:00:00 ",
          endTime: this.$getMonth("e", 0) + " 23:59:59 ",
          deptId: 101,
        },
        color: ["blue", "orange", "green", "pink", "yellow", "red"],
        //物资类型
        configOptions: [],
        // 所属仓库
        depotOptions: [],
        // 查询参数
        queryParams: {
          depotId: 7,
          typeId: null,
        },
        //统计信息
        infoData: {
          stockMoney: 0,
          stockNum: 0,
          typeNum: 0,
        },
      };
    },
    watch: {
      // 监听typeId
      "queryParams.typeId": "productStock",
    },
    created() {
      this.selectRepairStatusNum();
      this.faultTime();
      this.selectFaultNum();
      this.selectMaintainNum();
      this.selectEqpFaultNum();
      //获取物资类型
      this.getTreeselect();
      //获取仓库列表
      this.getDepot();
      //获取统计信息数据
      this.productStock();
      this.getDicts("stop_reason").then((response) => {
        this.stopReasonOptions = response.data;
      });
    },
    activated() {
      this.selectRepairStatusNum();
      this.faultTime();
      this.selectFaultNum();
      this.selectMaintainNum();
      this.selectEqpFaultNum();
      //获取物资类型
      this.getTreeselect();
      //获取仓库列表
      this.getDepot();
      //获取统计信息数据
      this.productStock();
      this.getDicts("stop_reason").then((response) => {
        this.stopReasonOptions = response.data;
      });
    },
    methods: {
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then((response) => {
          this.configOptions = response.data;
        });
      },
      //设备维修档案页面跳转
      xRowEcharts(e) {
        this.$router.push({
          path: "/equipment/repairInfo/repairFiles",
          query: {
            eqpName: e.name,
            productId: this.bottom2[e.dataIndex].faultCode,
            stopDateStart: this.bottom2Form.beginTime,
            stopDateEnd: this.bottom2Form.endTime,
          },
        });
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.typeName,
          children: node.children,
        };
      },
      //获取仓库列表
      getDepot() {
        listDepot({ type: "01", parentId: null, id: null }).then((response) => {
          this.depotOptions = response.data;
        });
      },
      //获取统计信息数据
      productStock() {
        productStock(this.queryParams).then((response) => {
          // console.log(response);
          if (response.code == 200) {
            this.infoData = response.data;
          }
        });
      },
      //当月实时数据
      selectRepairStatusNum() {
        SelectRepairStatusNum(this.top1Form).then((res) => {
          this.top1 = res;
        });
      },
      // //故障类型分析
      // selectFaultTypeNum() {
      //   SelectFaultTypeNum(this.center1Form).then((res) => {
      //     this.center1 = res;
      //   });
      // },
      //维修时长与维修次数分析
      faultTime() {
        ProductDayCount4_1(this.center1Form).then((res) => {
          if (res.code == 200) {
            // if (res.data.resultData.length > 3) {
            //   res.data.resultData = res.data.slice(0, 3);
            // }
            // for (let item of res.data.resultData) {
            //   item.resultTime = item.resultTime.slice(0, 10);
            // }
            this.center1.list = res.data.list;
            this.center1.all = res.data.total;
            // let mmArr = [];
            // let hhArr = [];
            let num = 0
            for (let item of this.center1.list) {
              item.value = (item.value1 * 60).toFixed(0);
              num += Number((item.value1 * 60).toFixed(0))
            }
            for (let item of this.center1.list) {
              item.value2 = (item.value1 * 60).toFixed(0) + '分钟'
            }
          }
        });
      },
      radioChange1(event) {
        this.center1Form.stopDateStart = event[0]
        this.center1Form.stopDateEnd = event[1]
        this.faultTime();
      },
      //故障次数分析
      selectFaultNum() {
        SelectFaultNum(this.center2Form).then((res) => {
          this.center2 = res.eqpList;
        });
      },
      radioChange2(event) {
        this.center2Form.beginTime = event[0] + " 00:00:00";
        this.center2Form.endTime = event[1] + " 23:59:59";
        this.selectFaultNum();
      },
      //养护次数统计分析
      selectMaintainNum() {
        SelectMaintainNum(this.bottom1Form).then((res) => {
          this.bottom1 = res;
        });
      },
      radioChange3(event) {
        this.bottom1Form.beginTime = event[0] + " 00:00:00";
        this.bottom1Form.endTime = event[1] + " 23:59:59";
        this.selectMaintainNum();
      },
      //设备维修档案
      selectEqpFaultNum() {
        SelectEqpFaultNum(this.bottom2Form).then((res) => {
          this.bottom2 = res;
        });
      },
      radioChange4(event) {
        this.bottom2Form.beginTime = event[0] + " 00:00:00";
        this.bottom2Form.endTime = event[1] + " 23:59:59";
        this.selectEqpFaultNum();
      },
    },
  };
</script>


<style lang="scss" scoped>
  .seven_content {
    z-index: 10;
    background: #093b76;
    width: 100%;
    height: 100%;
    overflow: auto;

    .content_top,
    .content_center {
      //  background: yellow;
      //   background: red;
      width: 100%;
      height: 64.8%;

      .title_box {
        position: relative;

        .top {
          height: 50px;
          width: 100%;
          border-bottom: 1px solid #2a8cf04a;
          display: flex;
          padding: 0 15px;
          align-items: center;

          .border {
            width: 3px;
            height: 16px;
            background: #06ffff;
          }

          span {
            font-size: 16px;
            font-family: Adobe Heiti Std, Adobe Heiti Std-R;
            font-weight: R;
            text-align: left;
            margin-left: 10px;
            color: #ffffff;
          }
        }
      }
    }

    .content_center {
      .echartsBox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0.8% 0.8% 0%;

        .jxb_right {
          width: 260px;
          height: 150px;
          margin-left: 30px;

          // background: red;
          .left {
            display: flex;
            flex-direction: column;
            align-items: center;

            .big_cir {
              width: 26px;
              height: 26px;
              border-radius: 50%;
              border: 1px solid #086088;

              .small_cir {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 2px solid #02d5c2;
              }
            }

            .big_cir_blue {
              border: 1px solid #105b95;

              .small_cir_blue {
                border: 2px solid #1c9ad5;
              }
            }

            .and {
              width: 2px;
              height: 20px;
              margin: 8px 0;
              background: -moz-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: -webkit-gradient(linear,
                  left top,
                  left bottom,
                  color-stop(0%, #02d5c2),
                  color-stop(100%, #1c9ad5));
              background: -webkit-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: -o-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: -ms-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: linear-gradient(to bottom, #02d5c2 0%, #1c9ad5 100%);
            }
          }

          .right {
            .item {
              width: 200px;
              height: 42px;
              border: 1px solid #086088;
              margin: 20px 10px;
              padding: 0 20px;

              .title,
              .number {
                font-size: 13px;
                color: #00ebcd;
              }

              .number {
                font-weight: 700;
              }
            }

            .item_blue {
              border: 1px solid #105b95;

              .title,
              .number {
                color: rgba(35, 195, 255, 1);
              }
            }
          }
        }

        @media screen and (max-width: 1000px) {
          .jxb_right {
            position: relative;
            left: -80px;
          }
        }
      }
    }

    .content_top {
      height: 23.8%;
      border-bottom: 4px solid rgba(9, 72, 141, 1);
      // background: red;
    }

    @media screen and (max-width: 1000px) {
      .content_top {
        height: 21.8%;

        .bzjk_box {
          height: calc(100% - 50px);

          .sjtj_item {
            width: 120px;
            height: 96px;
          }

          .and {
            width: 60px;
            margin: 0 10px;
          }
        }
      }
    }

    .bzjk_box {
      width: 100%;
      height: calc(100% - 40px);
      padding: 12px 7%;

      // max-height: 140px;
      // min-height: 110px;
      .sjtj_item {
        // width: 6.5%;
        width: 120px;
        height: 120px;
        background: linear-gradient(180deg,
            rgba(14, 81, 141, 0.5) 0%,
            rgba(18, 81, 141, 0.5) 100%);
        border: 1px solid #2489ee71;
        // height: 100%;
        padding: 3px;
        position: relative;

        .title {
          font-size: 17px;
          width: 100%;
          height: 44%;
          background: rgba(40, 107, 173, 0.6);
        }

        .number {
          font-size: 25px;
          width: 100%;
          height: 54%;
          background: rgba(35, 107, 173, 0.6);
          background-image: url("~@/assets/images/echarts/zhuangshi.png");
          background-size: 100% 100%;
          margin-top: 3%;
          font-weight: 700;
        }
      }

      .and {
        width: 60px;
        margin: 0 40px;
      }
    }

    .Echarts {
      height: calc(100% - 50px);
    }

    @media screen and (max-width: 1000px) {
      .Echarts {
        height: 100%;
      }
    }

    .center1 {
      width: 700px;
    }

    .center2 {
      width: 390px;
      // background: red;
    }

    .center_echarts {
      height: 180px;
    }

    .border_blue {
      border-bottom: 3px solid rgba(0, 192, 255, 0.9);
    }

    .border_orange {
      border-bottom: 3px solid rgba(255, 153, 0, 0.9);
    }

    .border_green {
      border-bottom: 3px solid rgba(59, 255, 230, 0.9);
    }

    .border_pink {
      border-bottom: 3px solid rgba(254, 58, 234, 0.9);
    }

    .border_yellow {
      border-bottom: 3px solid rgba(246, 255, 55, 0.9);
    }

    .border_red {
      border-bottom: 3px solid rgba(255, 74, 74, 0.9);
    }

    .text_blue {
      color: rgba(0, 192, 255, 0.9);
    }

    .text_orange {
      color: rgba(255, 153, 0, 0.9);
    }

    .text_green {
      color: rgba(59, 255, 230, 0.9);
    }

    .text_pink {
      color: rgba(254, 58, 234, 0.9);
    }

    .text_yellow {
      color: rgba(246, 255, 55, 0.9);
    }

    .text_red {
      color: rgba(255, 74, 74, 0.9);
      text-shadow: 1px 0px 3px rgba(255, 74, 74, 0.9);
    }

    .text_shadow_blue {
      color: rgba(0, 192, 255, 0.9);
      text-shadow: 1px 0px 3px rgba(0, 192, 255, 1);
    }

    .text_shadow_orange {
      color: rgba(255, 153, 0, 0.9);
      text-shadow: 1px 0px 3px rgba(255, 153, 0, 1);
    }

    .text_shadow_green {
      color: rgba(59, 255, 230, 0.9);
      text-shadow: 1px 0px 3px rgba(59, 255, 230, 1);
    }

    .text_shadow_pink {
      color: rgba(254, 58, 234, 0.9);
      text-shadow: 1px 0px 3px rgba(254, 58, 234, 1);
    }

    .text_yellow {
      color: rgba(246, 255, 55, 0.9);
      text-shadow: 1px 0px 3px rgba(246, 255, 55, 0.9);
    }

    .text_shadow_red {
      color: rgba(255, 74, 74, 0.9);
      text-shadow: 1px 0px 3px rgba(255, 74, 74, 0.9);
    }
  }

  @media screen and (max-width: 1000px) {
    .content_center {
      height: 75% !important;
      overflow-x: hidden;

      .echartsBox {
        height: calc(100% - 50px) !important;
      }
    }

    .content_top {
      height: 24% !important;
      overflow-x: hidden;
    }
  }

  .lt {
    width: 300px;
    height: 150px;
    position: relative;
    left: -3%;
  }

  .rt {
    width: 300px;
    height: 130px;

    // background-color: #ccc;
    .rt_top {
      position: absolute;
      font-size: 13px;
      margin: 5px 0px 3px 5px;
      z-index: 1;
      top: 36%;
      color: white;
      letter-spacing: 1px;
    }

    .rt_center {
      top: 36%;
      position: absolute;
      width: 120px;
      height: 14px;
      background-image: url("~@/assets/images/echarts/33_bc.png");
      background-size: 100% 100%;
      z-index: 0;
      margin: 13px 0px 3px 0px;
    }

    .clzdjd_box {
      width: 100%;
      height: 80%;
      /* margin-top: 9%; */

      .clzdjd_item {
        height: 100%;
        height: 25%;
        margin: 0 0px 10px 0;

        .clzdjd_item_left {
          width: 13%;
          height: 100%;
          max-width: 385px;
          max-height: 124px;
          position: relative;

          .bigCir {
            width: 25px;
            height: 25px;
            margin-right: 1px;
            background: url(/static/img/yuanquan.121f7179.png);
            background-size: 100% 100%;
            color: #ffffff;
            text-align: center;
            line-height: 25px;
            font-size: 10px;
          }

          .index {
            position: absolute;
            color: #ffffff;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
          }

          .border {
            width: 1px;
            height: calc(100% + 14px);
            background: #42a9ff;
            position: absolute;
            right: 0;
            top: 50%;
          }

          .smallCir {
            width: 13px;
            height: 13px;
            background: rgba(66, 169, 255, 0.3);
            border-radius: 50%;
            position: relative;
            left: 5px;

            div {
              width: 7px;
              height: 7px;
              background: #42a9ff;
              border-radius: 50%;
            }
          }
        }

        .clzdjd_item_right {
          width: 66%;
          height: 100%;
          margin-left: 6%;
          max-width: 435px;
          max-height: 124px;
          background: linear-gradient(180deg,
              rgba(44, 119, 187, 0.6) 0%,
              rgba(18, 81, 141, 0.6) 100%);
          border: 1px solid rgba(52, 134, 218, 0.6);

          .day {
            width: 50%;
            height: 100%;
            background: red;
            color: white;
            font-size: 13px;
            line-height: 26px;
            text-align: center;
            background: url("../../../assets/images/echarts/ju.png");
            background-size: 100% 100%;
          }

          .day_num {
            width: 50%;
            height: 100%;
            background-color: rgba(36, 104, 160, 0.5);
            font-size: 13px;
            text-align: center;
            color: #3bffe6;
            text-shadow: 1px 0px 3px #3bffe6;
            line-height: 26px;
          }
        }
      }

      .clzdjd_item:last-child .border {
        width: 0 !important;
      }
    }

    .clzdjd_box2 {
      width: 100%;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      display: flex;

      .clzdjd_item {
        .clzdjd_item_right {
          .day {
            line-height: 30px;
          }

          .day_num {
            line-height: 30px;
          }
        }
      }
    }

    .bottom {
      width: 100%;
      height: 41.6%;
    }
  }
</style>
